HTTP 方法 & query/params 的關係

• get(url, config)：取得資料

  • 參數放在 query string（?key=value）或 URL params（如 /users/:id）。
  • 參數會直接顯示在 url 上，不適合敏感資料。

  // URL params
  getActivity: (activityId) => axiosInstance.get(`/activity/${activityId}`)
  
  // query string
  searchRepliesByDay: (activityId, startDate, endDate) => axiosInstance.get(`/activity/${activityId}/replies/attendance-by-day?startDate=${startDate}&endDate=${endDate}`),
  
  

• post(url, data, config)：新增

  • 主體資料放 request body（data），URL 看不到，適合傳大量或敏感數據。
  • 少量過濾條件仍可用 query string 帶在 URL params 上。

  addActivity: (data) => axiosInstance.post('/activity', data),
  

• patch(url, data, config)：部分更新

  • 要改的欄位放 request body（data）；識別目標通常用 URL params。

  updateActivity: (activityId, data) => axiosInstance.patch(`/activity/${activityId}`, data),
  

• delete(url, config)：刪除

  • 目標用 URL params；必要時條件放 query string。
  • 注意：delete 只有兩個參數可以帶，所以若要傳 body（ex: 多資料刪除），需要把 data 屬性放在第二個參數 config 物件裡面。

  // 通常用 URL 路徑參數帶 id 刪除，就不需要 request body 傳送
  deleteActivity: (activityId) => axiosInstance.delete(`/activity/${activityId}`),
  
  // 需要刪除多筆資料（ex: 一次刪除3個id)
  delete: (payload) => axiosInstance.delete('/activity', {**data**: payload}),
  

什麼是 Axios?

Axios 就是讓前端（例如 Vue、React）能輕鬆發送 GET、POST、PATCH、DELETE 等 API 請求的工具。

Axios 官方定義好的「可使用的欄位（固定變數）」可以放進去 config 中。

{
  baseURL,            // 統一前綴url
  params,             // 查詢字串
  data,               // 放在 request body 的資料
  headers,            // 放 Token、Content-Type
  timeout,            // 設定幾毫秒後自動取消請求
  withCredentials,    // 跨域要不要帶cookie
  responseType,       // 預期後端回傳什麼格式（json 預設, blob 下載檔案, arraybuffer 二進位資料, text)
  onUploadProgress,   // 上傳進度
  onDownloadProgress, // 下載進度
}

若遇到特殊格式，需要額外進行設定：

// 預計後端回傳下載檔案格式
exportExcel: (activityId, data) => axiosInstance.post(`/activity/${activityId}/replies/export`, data, {responseType: 'blob'}),

貨搬回來了，但要放哪裡才不會亂？下一篇我們來聊聊數據的大腦 —— Pinia。